<template>
  <div class="qa-container">
    <div class="chat-header">
      <h2>智能问答</h2>
      <div class="user-info" v-if="userStore.isLoggedIn">
        <span class="username">{{ userStore.userInfo.name }}</span>
        <span class="credits">积分: {{ userStore.userInfo.credits }}</span>
      </div>
      <button v-else class="login-btn" @click="userStore.setLoginModalVisible(true)">登录</button>
      <button class="new-chat-btn" @click="newChat">新建对话</button>
    </div>
    <div class="chat-container">
      <div class="chat-messages" ref="chatContainer">
        <div v-for="(message, index) in chatStore.currentChat" :key="index" class="message" :class="message.sender">
          <div class="message-content">{{ message.content }}</div>
          <div class="message-time" v-if="message.timestamp">{{ formatTime(message.timestamp) }}</div>
        </div>
        <div v-if="isLoading" class="message assistant loading">
          <div class="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      
      <div class="chat-input">
        <textarea 
          v-model="userInput" 
          placeholder="请输入您的问题..."
          @keydown.enter.prevent="sendMessage"
          :disabled="isLoading"
        ></textarea>
        <button @click="sendMessage" :disabled="isLoading || !userInput.trim()" class="send-btn">
          <span v-if="!isLoading">发送</span>
          <span v-else>发送中...</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useUserStore } from '@/store/userStore';
import { useChatStore } from '@/store/chatStore';
import { formatTime } from '@/utils/date';

const userStore = useUserStore();
const chatStore = useChatStore();

const userInput = ref('');
const isLoading = ref(false);
const chatContainer = ref(null);

// 发送消息
const sendMessage = async () => {
  if (!userInput.value.trim() || isLoading.value) return;
  
  // 添加用户消息
  chatStore.addMessage({
    sender: 'user',
    content: userInput.value,
    timestamp: new Date()
  });
  
  userInput.value = '';
  
  await nextTick();
  scrollToBottom();
  
  // 模拟加载状态
  isLoading.value = true;
  
  // 模拟AI回复
  setTimeout(() => {
    isLoading.value = false;
    
    chatStore.addMessage({
      sender: 'assistant',
      content: '您好，我是SpaceTime天纪云国学AI，很高兴为您服务。请问有什么健康问题需要咨询？',
      timestamp: new Date()
    });
    
    scrollToBottom();
  }, 1500);
};

// 新建对话
const newChat = () => {
  chatStore.clearChat();
  
  // 添加欢迎消息
  setTimeout(() => {
    chatStore.addMessage({
      sender: 'assistant',
      content: '您好，我是SpaceTime天纪云国学AI，很高兴为您服务。请问有什么健康问题需要咨询？',
      timestamp: new Date()
    });
  }, 300);
};

// 滚动到底部
const scrollToBottom = () => {
  if (chatContainer.value) {
    chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
  }
};

// 初始化
onMounted(() => {
  // 如果没有消息，添加欢迎消息
  if (chatStore.currentChat.length === 0) {
    chatStore.addMessage({
      sender: 'assistant',
      content: '您好，我是SpaceTime天纪云国学AI，很高兴为您服务。请问有什么健康问题需要咨询？',
      timestamp: new Date()
    });
  }
});
</script>

<style lang="less" scoped>
@import "@/assets/styles/variables.less";

.qa-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: @background-color;
}

.chat-header {
  padding: @spacing-md;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid @border-color;
  
  h2 {
    margin: 0;
    color: @primary-color;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    
    .username {
      font-weight: bold;
      margin-right: @spacing-sm;
    }
    
    .credits {
      color: @primary-color;
    }
  }
  
  .login-btn, .new-chat-btn {
    padding: @spacing-xs @spacing-md;
    background-color: @primary-color;
    color: white;
    border: none;
    border-radius: @border-radius-sm;
    cursor: pointer;
    margin-left: @spacing-sm;
    
    &:hover {
      background-color: darken(@primary-color, 10%);
    }
  }
}

.chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: @spacing-md;
  
  .message {
    margin-bottom: @spacing-md;
    max-width: 80%;
    padding: @spacing-sm @spacing-md;
    border-radius: @border-radius-md;
    position: relative;
    
    &.user {
      align-self: flex-end;
      margin-left: auto;
      background-color: @primary-color;
      color: white;
    }
    
    &.assistant {
      align-self: flex-start;
      background-color: @input-bg;
      color: @text-color;
    }
    
    .message-content {
      word-break: break-word;
    }
    
    .message-time {
      font-size: @font-size-xs;
      opacity: 0.7;
      margin-top: @spacing-xs;
      text-align: right;
    }
    
    &.loading {
      .loading-dots {
        display: flex;
        
        span {
          width: 8px;
          height: 8px;
          margin: 0 4px;
          background-color: @text-color;
          border-radius: 50%;
          animation: bounce 1.4s infinite ease-in-out both;
          
          &:nth-child(1) {
            animation-delay: -0.32s;
          }
          
          &:nth-child(2) {
            animation-delay: -0.16s;
          }
        }
      }
    }
  }
}

.chat-input {
  padding: @spacing-md;
  border-top: 1px solid @border-color;
  display: flex;
  
  textarea {
    flex: 1;
    height: 60px;
    padding: @spacing-sm;
    border: 1px solid @border-color;
    border-radius: @border-radius-sm;
    background-color: @input-bg;
    color: @text-color;
    resize: none;
    font-family: inherit;
    
    &:focus {
      outline: none;
      border-color: @primary-color;
    }
  }
  
  .send-btn {
    margin-left: @spacing-sm;
    padding: 0 @spacing-md;
    background-color: @primary-color;
    color: white;
    border: none;
    border-radius: @border-radius-sm;
    cursor: pointer;
    
    &:hover:not(:disabled) {
      background-color: darken(@primary-color, 10%);
    }
    
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}
</style>
